<template>
  <div class="header">
    <div class="B-header" v-show="curRouter=='index'">
      <router-link class="logo" to="/index">
        <img src="../assets/logo.jpg" alt="">
      </router-link>
      <div class="nav">
        <router-link to="/about" class="navs">
          <img src="../assets/Index_1.png" alt="">
        </router-link>
        <router-link to="/business/zq" class="navs">
          <img src="../assets/Index_2.png" alt="">
        </router-link>
        <router-link to="/team" class="navs">
          <img src="../assets/Index_3.png" alt="">
        </router-link>
        <router-link to="/news" class="navs">
          <img src="../assets/Index_4.png" alt="">
        </router-link>
        <router-link to="/contact" class="navs">
          <img src="../assets/Index_5.png" alt="">
        </router-link>
      </div>
    </div>
    <div class="H-header" v-show="curRouter!='index'">
      <div id="Logo">
        <router-link to="/index"><img src="../assets/logo_o.png"></router-link>
      </div>
      <div id="Nav">
        <ul class="Menu1_List ul">
          <li class="Menu1_Item" style="display:none;">
            <router-link class="Menu1_Tit_a" to="/index">首页</router-link>
          </li>
          <li class="Menu1_Item Menu1_Item">
            <router-link to="/about" class="Menu1_Tit_a">集团介绍
              <div class="Menu1_Line"></div>
            </router-link>
          </li>
          <li class="Menu1_Item list" @mousemove="listShow=true" @mouseleave="listShow=false">
            <router-link to="/business/gl" class="Menu1_Tit_a">旗下业务
              <div class="Menu1_Line"></div>
            </router-link>
            <ul class="lists" v-show="listShow">
              <li @mousemove="list3Show=true" @mouseleave="list3Show=false">
                <router-link to="/business/gl">
                  <span>金融资产管理</span>
                </router-link>
                <ul v-show="list3Show">
                  <li>
                    <router-link to="/business/zq">
                      <span>证券服务</span>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/business/jr">
                      <span>金融咨询</span>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/business/zc">
                      <span>资产管理</span>
                    </router-link>
                  </li>
                </ul>
              </li>
              <li @mousemove="list4Show=true" @mouseleave="list4Show=false">
                <router-link to="/business/jy">
                  <span>区块链+</span>
                </router-link>
                <ul v-show="list4Show">
                  <li>
                    <router-link to="/business/jy">
                      <span>数字资产交易平台</span>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/business/team">
                      <span>区块链技术团队</span>
                    </router-link>
                  </li>
                </ul>
              </li>
              <li @mousemove="list2Show=true" @mouseleave="list2Show=false">
                <router-link to="/business/hj">
                  <span>红酒产业</span>
                </router-link>
                <ul v-show="list2Show">
                  <li>
                    <router-link to="/business/hj">
                      <span>麦迪森酒业</span>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/business/cc">
                      <span>红酒仓储服务</span>
                    </router-link>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="Menu1_Item">
            <router-link to="/team" class="Menu1_Tit_a">管理团队
              <div class="Menu1_Line"></div>
            </router-link>
          </li>
          <li class="Menu1_Item">
            <router-link to="/news" class="Menu1_Tit_a">企业动态
              <div class="Menu1_Line"></div>
            </router-link>
          </li>
          <li class="Menu1_Item">
            <router-link to="/contact" class="Menu1_Tit_a">联系我们
              <div class="Menu1_Line"></div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="M-header" v-bind:class="{'bgWhite':curRouter!='index'}">
      <router-link to="/index" class="logo" v-show="curRouter=='index'"><img src="../assets/logo.jpg" alt="" /></router-link>
      <router-link to="/index" class="logo" v-show="curRouter!='index'"><img src="../assets/logo_o.png" alt="" /></router-link>
      <div class="openMNav" @click="isShowMNav=true"><img src="../assets/OpenMNav_Btn.png" alt=""></div>
      <div class="MNav" v-show="isShowMNav">
        <div class="OpenMNav_Btn2" @click="isShowMNav=false">&gt;</div>
        <ul class="MMenu1_List">
          <li class="MMenu1_Item">
            <div class="MMenu1_TitEtc">
              <div class="MMenu1_Tit">
                <router-link class="MMenu1_Tit_a" to="/index">首页</router-link>
              </div>
            </div>
          </li>
          <li class="MMenu1_Item">
            <div class="MMenu1_TitEtc" v-bind:class="{'on':jtFlag}">
              <div class="MMenu1_Tit">
                <router-link class="MMenu1_Tit_a" to="/about">集团介绍</router-link>
              </div>
              <div class="MMenu1_Ico" @click="jtFlag=!jtFlag">&gt;</div>
            </div>
            <ul class="MMenu2_List" v-show="jtFlag">
              <li class="MMenu2_Item">
                <router-link class="MMenu2_Tit_a" to="/about">集团介绍</router-link>
              </li>
              <li class="MMenu2_Item">
                <router-link class="MMenu2_Tit_a" to="/about">公司愿景</router-link>
              </li>
              <li class="MMenu2_Item">
                <router-link class="MMenu2_Tit_a" to="/about">公司架构</router-link>
              </li>
            </ul>
          </li>
          <li class="MMenu1_Item">
            <div class="MMenu1_TitEtc" v-bind:class="{'on':ywFlag}">
              <div class="MMenu1_Tit">
                <router-link class="MMenu1_Tit_a" to="/business/gl">旗下业务</router-link>
              </div>
              <div class="MMenu1_Ico" @click="ywFlag=!ywFlag">&gt;</div>
            </div>
            <ul class="MMenu2_List" v-show="ywFlag">
              <li class="MMenu2_Item" v-bind:class="{'on':glFlag}">
                <router-link class="MMenu2_Tit_a" to="/business/gl">金融资产管理</router-link>
                <div class="MMenu1_Ico" @click="glFlag=!glFlag">&gt;</div>
                <ul v-show="glFlag">
                  <li class="MMenu2_Item">
                    <router-link class="MMenu2_Tit_a" to="/business/zq">证券服务</router-link>
                  </li>
                  <li class="MMenu2_Item">
                    <router-link class="MMenu2_Tit_a" to="/business/jr">金融资讯</router-link>
                  </li>
                  <li class="MMenu2_Item">
                    <router-link class="MMenu2_Tit_a" to="/business/zc">资产管理</router-link>
                  </li>
                </ul>
              </li>
              <li class="MMenu2_Item" v-bind:class="{'on':qklFlag}">
                <router-link class="MMenu2_Tit_a" to="/business/jy">区块链+</router-link>
                <div class="MMenu1_Ico" @click="qklFlag=!qklFlag">&gt;</div>
                <ul v-show="qklFlag">
                  <li class="MMenu2_Item">
                    <router-link class="MMenu2_Tit_a" to="/business/jy">数字资产交易平台</router-link>
                  </li>
                  <li class="MMenu2_Item">
                    <router-link class="MMenu2_Tit_a" to="/business/team">区块链技术团队</router-link>
                  </li>
                </ul>
              </li>
              <li class="MMenu2_Item" v-bind:class="{'on':hjFlag}">
                <router-link class="MMenu2_Tit_a" to="/business/hj">红酒产业</router-link>
                <div class="MMenu1_Ico" @click="hjFlag=!hjFlag">&gt;</div>
                <ul v-show="hjFlag">
                  <li class="MMenu2_Item">
                    <router-link class="MMenu2_Tit_a" to="/business/hj">麦迪森酒业</router-link>
                  </li>
                  <li class="MMenu2_Item">
                    <router-link class="MMenu2_Tit_a" to="/business/cc">红酒仓储服务</router-link>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="MMenu1_Item">
            <div class="MMenu1_TitEtc">
              <div class="MMenu1_Tit">
                <router-link class="MMenu1_Tit_a" to="/team">管理团队</router-link>
              </div>
            </div>
          </li>
          <li class="MMenu1_Item">
            <div class="MMenu1_TitEtc">
              <div class="MMenu1_Tit">
                <router-link class="MMenu1_Tit_a" to="/news">企业动态</router-link>
              </div>
            </div>
          </li>
          <li class="MMenu1_Item">
            <div class="MMenu1_TitEtc">
              <div class="MMenu1_Tit">
                <router-link class="MMenu1_Tit_a" to="/contact">联系我们</router-link>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShowMNav: false,
      jtFlag: false,
      ywFlag: false,
      hjFlag: false,
      glFlag: false,
      qklFlag: false,
      listShow: false,
      list2Show: false,
      list3Show: false,
      list4Show: false,
      curRouter: ""
    };
  },
  mounted() {
    console.log(this.$route);
    this.curRouter = this.$route.name;
  },
  watch: {
    $route() {
      console.log(this.$route.name);
      this.curRouter = this.$route.name;
    }
  },
  methods: {}
};
</script>

<style>
.header {
  width: 100%;
  position: fixed;
  z-index: 1000;
}

/* 首页导航条 */
.B-header {
  width: 1140px;
  margin: 0 auto;
  overflow: hidden;
}

@media (max-width: 1140px) {
  .B-header {
    width: 96%;
  }
}
.B-header .logo {
  float: left;
}
.B-header .logo img {
  width: 200px;
  height: auto;
}
.B-header .nav {
  float: right;
  padding-top: 67px;
}
.B-header .navs {
  margin-left: 100px;
}
@media (max-width: 1090px) {
  .B-header .navs {
    margin-left: 70px;
  }
}
@media (max-width: 931px) {
  .B-header .navs {
    margin-left: 38px;
  }
}
@media (max-width: 767px) {
  .B-header {
    display: none;
  }
  .H-header {
    display: none;
  }
}

.H-header {
  width: 100%;
  background-color: white;
  position: fixed;
  width: 100%;
  z-index: 1234567890;
}
.H-header #Logo img {
  width: 103px;
  height: 67px;
}
@media (max-width: 767px) {
  .H-header {
    display: none;
  }
}
#Logo {
  float: left;
  max-width: 105px;
  text-align: center;
}
#Logo img {
  margin: 0 auto;
}
#Nav {
  float: left;
  width: 83.3%;
}
.ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
.Menu1_Item {
  float: left;
  /* position: relative; */
  width: 20%;
}
.on .Menu1_Line {
  display: block;
}
.Menu1_Line {
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #8b0d19;
  top: 0;
  right: -1px;
  display: none;
}
.Menu1_Tit_a {
  display: block;
  font-size: 16px;
  color: #8b0d19;
  line-height: 67px;
  text-align: center;
  background-image: url(../assets/P_2.jpg);
  background-repeat: no-repeat;
  background-position: left center;
  position: relative;
}
.on.Menu1_Tit_a {
  color: #ffffff;
  background-color: #8b0d19;
  background-image: none;
}

.lists {
  position: absolute;
  top: 67px;
  left: 0;
  width: 100%;
  height: 113px;
  display: flex;
}
.lists li {
  flex: 1;
  display: inline-block;
  height: 113px;
  line-height: 113px;
  background: #ddd;
  text-align: center;
}
.lists li:first-child {
  background: url(../assets/1.jpg) no-repeat 0 0;
  background-size: cover;
}
.lists li:nth-child(2) {
  background: url(../assets/3.jpg) no-repeat 0 0;
  background-size: cover;
}
.lists li:nth-child(3) {
  background: url(../assets/5.jpg) no-repeat 0 0;
  background-size: cover;
}
.lists li ul {
  position: absolute;
  top: 110px;
  left: 0;
  width: 100%;
  height: 113px;
  display: flex;
}

.lists li ul li {
  flex: 1;
  display: inline-block;
  height: 113px;
  line-height: 113px;
}
.lists li span {
  display: inline-block;
  width: 100%;
  height: 113px;
  text-align: center;
  line-height: 113px;
  font-size: 18px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}
.lists li ul li a {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.lists li ul li:first-child {
  background: url(../assets/1.jpg) no-repeat 0 0;
  background-size: cover;
}
.lists li ul li:nth-child(2) {
  background: url(../assets/2.jpg) no-repeat 0 0;
  background-size: cover;
}
.lists li ul li:nth-child(3) {
  background: url(../assets/3.jpg) no-repeat 0 0;
  background-size: cover;
}
.lists li ul li:nth-child(4) {
  background: url(../assets/4.jpg) no-repeat 0 0;
  background-size: cover;
}
.lists li ul li:nth-child(5) {
  background: url(../assets/5.jpg) no-repeat 0 0;
  background-size: cover;
}

.M-header {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  position: fixed;
  z-index: 10000;
  display: none;
}
.bgWhite {
  background: #fff;
}
@media (max-width: 767px) {
  .M-header {
    display: block;
  }
}
/* @media (max-width: 1140px) {
  .M-header {
    width: 96%;
  }
} */
.M-header .logo {
  float: left;
  height: 100%;
}
.M-header .logo img {
  width: auto;
  height: 100%;
}
.openMNav {
  height: 100%;
  float: right;
  padding: 10px 0px;
  box-sizing: border-box;
}
.openMNav img {
  height: 20px;
}

.MNav {
  position: absolute;
  /* right: -150px; */
  right: 0px;
  width: 200px;
  top: 0;
}
.OpenMNav_Btn2 {
  color: #fff;
  width: 100%;
  background-color: #8b0d19;
  z-index: 1;
  top: -40px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  font-family: "宋体";
  font-size: 30px;
  text-align: left;
}
.MMenu1_List {
  right: 0px;
  background-color: #fff;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
}
.MMenu1_TitEtc {
  height: 45px;
}
.MMenu1_Tit {
  float: left;
}
.MMenu1_Tit_a {
  color: #8b0d19;
  line-height: 45px;
  font-size: 18px;
}
.MMenu1_Ico {
  color: #8b0d19;
  line-height: 45px;
  font-size: 18px;
  float: right;
  font-family: "宋体";
  cursor: pointer;
}
.on .MMenu1_Ico {
  transform: rotate(90deg);
}
.MMenu2_List {
  padding-left: 2em;
  /* display: none; */
}
.MMenu2_Tit_a {
  color: #8b0d19;
  line-height: 45px;
  font-size: 18px;
}
</style>

